<template>
	<div class="app-container">
		<div>
			<el-form :inline="true" :model="listQuery" class="demo-form-inline" @submit.native.prevent>
				<el-form-item label="主播姓名">
					<el-input v-model="listQuery.q_name" size="small"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select class="toolbar-lable-right" v-model="listQuery.q_state" placeholder="请选择" size="small">
						<el-option v-for="item in actStatus" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="small" @click="this.getList">查询</el-button>
					<el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
				</el-form-item>
			</el-form>
			<div class="button-table-margin">
        <el-button size="small" type="primary" @click="details">查看</el-button>
				<el-button size="small" type="primary" @click="auditup" v-permission="['/admin/live/anchor/auditup']">审核通过</el-button>
				<el-button size="small" type="primary" @click="auditdown" v-permission="['/admin/live/anchor/auditdown']">审核驳回</el-button>
				<el-button size="small" type="primary" @click="down" v-permission="['/admin/live/anchor/down']">下架</el-button>
				<el-button size="small" type="primary" @click="edit" v-permission="['/admin/live/anchor/sort']">修改排序</el-button>
        <el-button size="small" type="primary" @click="collect" v-permission="['/admin/live/anchor/listCollect']">用户收藏</el-button>
			</div>
			<el-table ref="singleTable" v-loading="listLoading" :data="dataList" border fit highlight-current-row
				@current-change="handleCurrentChange" style="width: 100%">
				<el-table-column type="index" align="center" width="50"></el-table-column>
				<el-table-column property="name" width="200" label="主播姓名" show-overflow-tooltip></el-table-column>
				<el-table-column property="sellerName" width="200" label="所属商家" show-overflow-tooltip></el-table-column>
				<el-table-column property="des" width="200" label="主播描述" show-overflow-tooltip></el-table-column>
				<el-table-column property="sex" width="200" label="直播性别"></el-table-column>
				<el-table-column property="age" width="200" label="主播年龄"></el-table-column>
				<el-table-column property="mobile" width="200" label="手机号码"></el-table-column>
				<el-table-column property="state" width="150" label="状态">
					<template slot-scope="scope">
						{{ codeBox.ACT_STATUS[scope.row.state] }}
					</template>
				</el-table-column>
        <el-table-column property="type" width="150" label="是否置顶">
        	<template slot-scope="scope">
        		{{ codeBox.YES_NO[scope.row.isTop] }}
        	</template>
        </el-table-column>
        <el-table-column property="sort" width="150" label="权重"></el-table-column>
				<el-table-column property="auditUserName" width="200" label="审核人"></el-table-column>
				<el-table-column property="auditUserTime" width="200" label="审核时间"></el-table-column>
				<el-table-column property="updateUserName" width="200" label="创建人"></el-table-column>
				<el-table-column property="createTime" width="200" label="创建时间"></el-table-column>
			</el-table>
			<Pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>

    <div>
    	<el-dialog title="收藏详情" :visible.sync="dialogFormVisible">
    		<el-form :inline="true" ref="collectuserListQuery" :model="collectuserListQuery" class="demo-form-inline">
    			<el-form-item label="会员名称">
    				<el-input v-model="collectuserListQuery.q_memberName" size="small"></el-input>
    			</el-form-item>
    			<el-form-item>
    				<el-button type="primary" icon="el-icon-search" size="small" @click="getCollectuserList">查询
    				</el-button>
    				<el-button icon="el-icon-refresh" size="small" @click="resetCollectuser">重置</el-button>
    			</el-form-item>
    		</el-form>
    		<el-table ref="singleTable" :data="collectuserList" height="450" border fit highlight-current-row
    			style="width: 100%">
    			<el-table-column property="memberName"  label="会员名称"></el-table-column>
    			<el-table-column property="createTime" label="收藏时间"></el-table-column>
    		</el-table>
    		<Pagination v-show="collectuserTotal>0" :total="collectuserTotal" :page.sync="collectuserListQuery.page"
    			:limit.sync="collectuserListQuery.limit" @pagination="getCollectuserList" />
    	</el-dialog>
    </div>

    <el-dialog title="修改排序" :visible.sync="dialogFormVisibleSort">
      <el-form ref="liveAnchor" :rules="rules" :model="liveAnchor" label-position="right" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="名称">
          <div class="yxkj-word-black" v-html="liveAnchor.name"></div>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="liveAnchor.sort" :min="0" :max="99" :precision="0"></el-input-number>
        </el-form-item>
        <el-form-item>
          <span class="form-word-hint">排序必须填写，输入0到99之间的数字，数字越大顺序越靠前</span>
        </el-form-item>
        <el-form-item label="是否置顶" prop="isTop">
          <el-radio-group v-model="liveAnchor.isTop">
            <el-radio v-for="item in yesNo" :key="item.value" :label="item.value">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleSort = false">
          取消
        </el-button>
        <el-button type="primary" @click="sortLiveAnchor()">
          提交
        </el-button>
      </div>
    </el-dialog>

	</div>
</template>

<script>
	import {
		listLiveAnchor,
		auditupLiveAnchor,
		auditdownLiveAnchor,
		downLiveAnchor,
		listCollectLiveAnchor,
    sortLiveAnchor
	} from '@/api/live'
	import Pagination from '@/components/Pagination'
	import {
		Message
	} from 'element-ui'
	import {
		getCodeManager,
		codeToArray,
    uploadFileImage
	} from '@/api/all'
	export default {
		name: 'anchorlist',
		components: {
			Pagination
		},
		data() {
			return {
				currentRow: null,
				dataList: [],
				actStatus: [],
				yesNo: [],
				total: 0,
				listLoading: true,
				listQuery: {
					page: 1,
					limit: 20,
					q_name: '',
					q_state: ''
				},
        dialogFormVisible: false,
        dialogFormVisibleSort: false,
        collectuserList: [],
        collectuserTotal: 0,
        collectuserListQuery: {
        	page: 1,
        	limit: 20,
        	q_memberName: ''
        },
        liveAnchor: {
          id: 0,
          sort: '',
          isTop: '',
          name: ''
        },
        rules: {
          sort: [{ required: true, message: '排序不能为空', trigger: 'change' }],
          isTop: [{ required: true, message: '请选择是否置顶', trigger: 'change' }],
        }
			}
		},
		created() {
			getCodeManager('ACT_STATUS,YES_NO', () => {
				this.actStatus = codeToArray('ACT_STATUS');
				this.yesNo = codeToArray('YES_NO');
			})
			this.getList()
		},
		methods: {
			handleCurrentChange(val) {
				// 选中当前行数据
				this.currentRow = val
			},
			// 获取列表数据
			getList() {
				this.listLoading = true
				listLiveAnchor(this.listQuery).then(response => {
					this.dataList = response.data.rows
					this.total = response.data.total
					this.listLoading = false
				})
			},
			reset() {
				this.listQuery = {
					page: 1,
					limit: 20,
					q_name: '',
					q_state: ''
				}
				this.getList()
			},
      resetCollectuser() {
      	this.collectuserListQuery = {
      		page: 1,
      		limit: 20,
      		q_memberName: ''
      	}
      	this.getCollectuserList()
      },
      collect() {
      	if (this.currentRow == null) {
      		Message.error('请选择一条记录')
      		return
      	}
      	this.dialogFormVisible = true
      	this.getCollectuserList()
      },
      getCollectuserList() {
      	let newListQyery = {
      		q_anchorId: this.currentRow.id,
      		...this.collectuserListQuery
      	}
      	listCollectLiveAnchor(newListQyery).then(response => {
      		this.collectuserList = response.data.rows
      		this.collectuserTotal = response.data.total
      	})
      },
			auditup() {
				if (this.currentRow == null) {
					Message.error('请选择一条记录')
					return
				}
				if (this.currentRow.state != 2) {
					Message.error('只有提交审核状态才能进行相关操作')
					return
				}
				this.$confirm('确定审核通过吗？', '提示', {
					onfirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					auditupLiveAnchor({
						id: this.currentRow.id
					}).then(response => {
						if (!response.data.success) {
							Message.error(response.data.message);
							return;
						}
						Message.success('操作成功')
						this.getList()
					})
				})
			},
			auditdown() {
				if (this.currentRow == null) {
					Message.error('请选择一条记录')
					return
				}
				if (this.currentRow.state != 2) {
					Message.error('只有提交审核状态才能进行相关操作')
					return
				}
				this.$confirm('确定审核驳回吗？', '提示', {
					onfirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					auditdownLiveAnchor({
						id: this.currentRow.id
					}).then(response => {
						if (!response.data.success) {
							Message.error(response.data.message);
							return;
						}
						Message.success('操作成功')
						this.getList()
					})
				})
			},
			down() {
				if (this.currentRow == null) {
					Message.error('请选择一条记录')
					return
				}
				this.$confirm('确定下架吗？', '提示', {
					onfirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					downLiveAnchor({
						id: this.currentRow.id
					}).then(response => {
						if (!response.data.success) {
							Message.error(res.data.message);
							return;
						}
						Message.success('操作成功')
						this.getList()
					})
				})
			},
			details() {
				if (this.currentRow == null) {
					Message.error('请选择一条记录')
					return
				}
				this.$router.push({
					path: "/live/anchorlook",
					query: {
						id: this.currentRow.id
					}
				})
			},
      edit() {
        if(this.currentRow == null) {
          Message.error('请选择一条记录')
          return
        }
        this.liveAnchor = {
          id: this.currentRow.id,
          name: this.currentRow.name,
          sort: this.currentRow.sort,
          isTop: this.currentRow.isTop + ''
        }
        this.dialogFormVisibleSort = true
        this.$nextTick(() => {
          this.$refs['liveAnchor'].clearValidate()
        })
      },
      sortLiveAnchor() {
        this.$refs['liveAnchor'].validate((valid) => {
          if (valid) {
            sortLiveAnchor(this.liveAnchor).then(res => {
              if(!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              this.dialogFormVisibleSort = false
              this.getList()
              Message.success('操作成功')
            })
          }
        })
      }

		}
	}
</script>

<style>
</style>
